Data Fetching এবং Submitting হল একটি অ্যাপ্লিকেশনের অন্যতম গুরুত্বপূর্ণ ফিচার, যা সার্ভার থেকে ডেটা আনা এবং সার্ভারে ডেটা প্রেরণ করতে ব্যবহৃত হয়। ExtJS তে, আপনি GET এবং POST রিকোয়েস্ট ব্যবহার করে ডেটা ফেচ এবং সাবমিট করতে পারেন। এটি AJAX (Asynchronous JavaScript and XML) কল ব্যবহার করে সার্ভারের সাথে যোগাযোগ করে এবং পেজ রিফ্রেশ না করেই ডেটা লোড বা সাবমিট করার সুযোগ দেয়।
এখানে, আমরা Ext.Ajax এবং Ext.data.Store ক্লাসের মাধ্যমে GET এবং POST রিকোয়েস্ট ব্যবহার করে ডেটা ফেচ এবং সাবমিট করার পদ্ধতি দেখবো।
১. GET Request - Data Fetching
GET Request সাধারণত সার্ভার থেকে ডেটা ফেচ করতে ব্যবহৃত হয়। ExtJS এ Ext.Ajax এর মাধ্যমে আপনি GET রিকোয়েস্ট করতে পারেন এবং সার্ভার থেকে ডেটা আনার জন্য callback functions ব্যবহার করতে পারেন।
GET Request উদাহরণ:
Ext.Ajax.request({
url: 'https://api.example.com/data', // API বা সার্ভারের URL
method: 'GET', // GET রিকোয়েস্ট
success: function(response) {
var data = Ext.decode(response.responseText); // সার্ভার থেকে আসা JSON ডেটা ডিকোড করা
console.log('Data fetched:', data);
},
failure: function(response) {
console.log('Error fetching data:', response.status);
}
});
ব্যাখ্যা:
url: GET রিকোয়েস্টের জন্য সার্ভারের URL।method: HTTP মেথড হিসাবেGETউল্লেখ করা হয়েছে।success: রিকোয়েস্ট সফল হলে কলব্যাক ফাংশন। এখানে, ডেটা JSON আকারে ডিকোড করা হয়েছে।failure: রিকোয়েস্ট ব্যর্থ হলে কলব্যাক ফাংশন। এখানে, ত্রুটির তথ্য লগ করা হচ্ছে।
২. POST Request - Data Submitting
POST Request সাধারণত সার্ভারে ডেটা সাবমিট করতে ব্যবহৃত হয়। POST রিকোয়েস্টে, ইউজার ইনপুট বা অন্যান্য ডেটা সার্ভারে পাঠানো হয়। ExtJS তে Ext.Ajax ব্যবহার করে POST রিকোয়েস্ট করতে হয়।
POST Request উদাহরণ:
Ext.Ajax.request({
url: 'https://api.example.com/submit', // API বা সার্ভারের URL
method: 'POST', // POST রিকোয়েস্ট
params: {
name: 'John Doe',
email: 'john.doe@example.com'
}, // ডেটা প্যারামিটার হিসাবে পাঠানো
success: function(response) {
console.log('Data submitted successfully:', response.responseText);
},
failure: function(response) {
console.log('Error submitting data:', response.status);
}
});
ব্যাখ্যা:
url: POST রিকোয়েস্টের জন্য সার্ভারের URL।method: HTTP মেথড হিসাবেPOSTউল্লেখ করা হয়েছে।params: পাঠানো ডেটা। এখানেnameএবংemailপ্যারামিটার পাঠানো হচ্ছে।success: রিকোয়েস্ট সফল হলে কলব্যাক ফাংশন, যেখানে সার্ভার থেকে প্রাপ্ত রেসপন্স প্রদর্শিত হচ্ছে।failure: রিকোয়েস্ট ব্যর্থ হলে কলব্যাক ফাংশন।
৩. Data Fetching with Store and Proxy
ExtJS এর Store ক্লাসটি ডেটা ম্যানেজমেন্ট এবং ফেচিংয়ের জন্য ব্যবহৃত হয়। Proxy কনফিগারেশন দিয়ে আপনি GET বা POST রিকোয়েস্টের মাধ্যমে স্টোরে ডেটা লোড করতে পারেন।
Store এবং Proxy এর মাধ্যমে GET Request:
Ext.create('Ext.data.Store', {
storeId: 'userStore',
fields: ['id', 'name', 'email'],
proxy: {
type: 'ajax', // AJAX প্রক্সি ব্যবহার
url: 'https://api.example.com/users', // GET রিকোয়েস্টের URL
reader: {
type: 'json', // JSON ডেটা রিডার
rootProperty: 'users' // রেসপন্সের মধ্যে users আর্কাইভ থেকে ডেটা আসবে
}
},
autoLoad: true // স্টোর লোড হবে যখন অ্যাপ্লিকেশন শুরু হবে
});
এখানে:
proxy: এটি ডেটা ফেচ করার জন্য AJAX রিকোয়েস্ট ব্যবহার করে।url: GET রিকোয়েস্টের জন্য API URL।reader: JSON রিডার সেট করা হয়েছে, যাতে সার্ভার থেকে আসা JSON ডেটা পড়া যায়।
Store এবং Proxy এর মাধ্যমে POST Request:
Ext.create('Ext.data.Store', {
storeId: 'userStore',
fields: ['id', 'name', 'email'],
proxy: {
type: 'ajax',
url: 'https://api.example.com/submit', // POST রিকোয়েস্টের URL
method: 'POST', // HTTP মেথড POST
writer: {
type: 'json',
writeAllFields: true // সব ফিল্ড লিখতে হবে
},
reader: {
type: 'json',
rootProperty: 'response'
}
},
data: [{ id: 1, name: 'John', email: 'john.doe@example.com' }],
autoSync: true // ডেটা সার্ভারে অটো সাবমিট হবে
});
এখানে:
method: 'POST': POST রিকোয়েস্ট ব্যবহার করা হয়েছে।writer: POST রিকোয়েস্টের ডেটা পাঠানোর জন্যjsonwriter ব্যবহৃত হয়েছে।
৪. Handling JSON Response
JSON হল ডেটা ফেচ এবং সাবমিট করার জন্য একটি জনপ্রিয় ফর্ম্যাট। ExtJS এ, সার্ভারের থেকে প্রাপ্ত JSON ডেটা reader ব্যবহার করে প্রসেস করা হয়।
JSON Response Handling Example:
Ext.Ajax.request({
url: 'https://api.example.com/data',
method: 'GET',
success: function(response) {
var data = Ext.decode(response.responseText); // JSON ডেটা ডিকোড করা
console.log('Data fetched:', data);
},
failure: function(response) {
console.log('Error fetching data:', response.status);
}
});
এখানে Ext.decode() ব্যবহার করা হয়েছে, যা সার্ভারের JSON রেসপন্স ডেটাকে JavaScript অবজেক্টে রূপান্তরিত করবে।
৫. Error Handling in GET/POST Requests
GET বা POST রিকোয়েস্ট করার সময় সাধারণত কিছু ত্রুটি (Error) ঘটতে পারে, যেমন সার্ভার না পাওয়া, নেটওয়ার্ক সমস্যাসহ বিভিন্ন কারণে। এ ধরনের ত্রুটি হ্যান্ডলিংয়ের জন্য failure কলব্যাক ফাংশন ব্যবহার করা হয়।
Error Handling Example:
Ext.Ajax.request({
url: 'https://api.example.com/invalid-url',
method: 'GET',
success: function(response) {
var data = Ext.decode(response.responseText);
console.log('Data fetched:', data);
},
failure: function(response) {
if (response.status === 404) {
console.log('Error: Resource not found (404)');
} else if (response.status === 500) {
console.log('Error: Server error (500)');
} else {
console.log('Error:', response.statusText);
}
}
});
এখানে, failure ফাংশনে সার্ভারের স্ট্যাটাস কোড অনুযায়ী ত্রুটি বার্তা প্রদর্শন করা হচ্ছে।
সারাংশ
- GET Request: সার্ভার থেকে ডেটা ফেচ করতে ব্যবহৃত হয় এবং Ext.Ajax এর মাধ্যমে করা হয়।
- POST Request: সার্ভারে ডেটা সাবমিট করতে ব্যবহৃত হয় এবং Ext.Ajax এর মাধ্যমে করা হয়।
- Data Fetching with Store and Proxy: ExtJS Store এবং Proxy ব্যবহার করে সার্ভার থেকে ডেটা ফেচ করা যায় এবং পেজ রিফ্রেশ না করেই ডেটা লোড করা যায়।
- Handling JSON Response: JSON রেসপন্স ডেটা ব্যবহার করা এবং Ext.decode() দিয়ে ডেটা ডিকোড করা।
- Error Handling: GET বা POST রিকোয়েস্টে ত্রুটি হ্যান্ডলিং করা যায় failure কলব্যাক ফাংশনের মাধ্যমে।
ExtJS তে GET এবং POST রিকোয়েস্ট ব্যবহার করে আপনি খুব সহজেই ডেটা ফেচ এবং সাবমিট করতে পারেন, যা আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ডায়নামিক করে তোলে।
Read more
